<template>
  <div class="visitor">
    <div class="header">
      <p class="title">实时游客统计</p>
      <p class="header-bg"></p>
      <p class="reservation">
        可预约总量:
        <span class="count">9999</span>
        人
      </p>
    </div>
    <div class="realtime">
      <span v-for="(item, index) in people" :key="index" class="people">
        {{ item }}
      </span>
    </div>
    <div class="echart-container">
      <div class="echart" ref="echart"></div>
      <!-- SVG 用于自定义边框 -->
      <svg
        class="svg-border"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 550 550"
      >
        <!-- 上半部分虚线（变细） -->
        <path
          d="M 10,270 A 252,252 0 0,1 540,270"
          stroke="rgba(41, 77, 153, 1)"
          stroke-width="4"
          stroke-dasharray="10,5"
          fill="none"
        />
        <!-- 下半部分实线（加粗） -->
        <path
          d="M 540,270 A 252,252 0 0,1 10,270"
          stroke="rgba(41, 77, 153, 1)"
          stroke-width="12"
          fill="none"
        />
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'

let people = ref('215201人')

let echart = ref()
onMounted(() => {
  let myChart = echarts.init(echart.value)
  myChart.setOption({
    // title: {
    //   text: '水球图',
    // },
    xAxis: {},
    yAxis: {},
    series: [
      {
        type: 'liquidFill',
        data: [0.5, 0.4],
        animationDuration: 3,
        animationDurationUpdate: 0,
        radius: '90%',
        outline: {
          show: false,
          borderDistance: 8,
          itemStyle: {
            color: 'none',
            borderColor: '#294D99',
            borderWidth: 8,
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.25)',
          },
        },
        label: {
          formatter: '预约量',
          fontSize: 28,
        },
      },
    ],
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
    },
  })
})
</script>

<style lang="scss" scoped>
.visitor {
  background: url('../../images/dataScreen-main-lb.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
  .header {
    margin-left: 20px;
    .title {
      color: white;
      font-size: 15px;
      margin-top: 10px;
    }
    .header-bg {
      width: 68px;
      height: 7px;
      background: url('../../images/dataScreen-title.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
    .reservation {
      float: right;
      color: white;
      font-size: 15px;
      margin-right: 10px;

      .count {
        color: #00f5ff;
      }
    }
  }

  .realtime {
    margin-top: 30px;
    display: flex;
    padding: 10px;
    span {
      flex: 1;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: url('../../images/total.png') no-repeat;
      background-size: 100% 100%;
      color: #00f5ff;
      font-size: 25px;
    }
  }

  .echart-container {
    position: relative;
    width: 100%;
    height: 240px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */

    .echart {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .svg-border {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
